import { Button, Form, Input, Select, Space } from "antd";
import { useEffect, useState } from "react";
import { Navigation } from "../../../../types/content/navigation";
import { queryNavTagList } from "@/api/content/navigation";
interface IProps {
  onChange: (form: Navigation.Query) => void;
}
export default function QueryForm({ onChange }: IProps) {
  const [form] = Form.useForm();
  const [tagList, setTagList] = useState<string[]>([]);
  /**
   * 获取标签列表
   */
  const getTagsList = async () => {
    const res = await queryNavTagList();
    if (res.code === 200) {
      setTagList(res.data || []);
    }
  };
  useEffect(() => {
    getTagsList();
  }, []);
  return (
    <Form
      layout="inline"
      name="navigationQuery"
      onFinish={(form) => {
        onChange(form);
      }}
      autoComplete="off"
    >
      <Form.Item<Navigation.Query> label="名称" name="name">
        <Input placeholder="请输入名称" allowClear size="middle"/>
      </Form.Item>
      <Form.Item<Navigation.Query> label="类别" name="type">
        <Select placeholder="请选择类别"  style={{ width: 180 }} allowClear size="middle">
          {tagList.map((tag) => (
            <Select.Option key={tag} value={tag}>
              {tag}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item>
      <Space>
          <Button type="primary" htmlType="submit" size="middle">
            查询
          </Button>
          <Button
            htmlType="button"
            size="middle"
            onClick={() => {
              form.resetFields();
              form.submit();
            }}
          >
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
}
